<template>
    <div class="app">
        <h2>账号：{{ acount.usename }}</h2>
        <h2>密码：{{ acount.password }}</h2>
        <button @click="changeacount">改变账号密码</button>
        <h1 :style="{ color: 'red' }">ref的使用:</h1>
        <!-- vue的template会对ref做浅层解包 -->
        <h2>当前数值：{{ counter }}</h2>
        <button @click="changecounter">改变数值</button>
    </div>
    <home :name="nameref" :age="ageref"></home>
</template>
<script>
// 记得从vue中导入reactive函数
import { reactive } from "vue"
import { ref } from "vue"
import home from "./home.vue"
export default {
    components: {
        home
    }, 
    // 1.响应式数据
    setup() {
        // rective中定义复杂数据类型
        const acount = reactive({
            usename: "小染",
            password: "263"
        })
        // 改变数据
        function changeacount() {
            acount.usename = "爱丽丝",
                acount.password = "123"
        }
        // 2.ref的使用
        // 用ref包裹
        const counter = ref(0)
        // 动态改变数值
        function changecounter() {
            // 拿到值
            counter.value++
        }

        const nameref = ref("小星辰")
        const ageref=ref(19)
        // 记得return 才能显示数据出来
        return {
            acount,
            changeacount,
            counter,
            changecounter,
            nameref,
            ageref
        }
    }

}
</script>
<style scoped lang="less"></style>